<template>
  <view class="health-analytics">
    <view class="analytics-header">
      <view class="header-text">
        <text class="header-title">健康数据分析</text>
        <text class="header-subtitle">追踪您的健康趋势</text>
      </view>
      <view class="period-selector">
        <view 
          v-for="period in periods" 
          :key="period.value"
          class="period-btn"
          :class="{ active: selectedPeriod === period.value }"
          @tap="setPeriod(period.value)"
        >
          <text class="period-text">{{ period.label }}</text>
        </view>
      </view>
    </view>

    <!-- 关键指标 -->
    <view class="metrics-grid">
      <view 
        v-for="(metric, key) in healthMetrics" 
        :key="key"
        class="metric-card"
      >
        <view class="metric-header">
          <view class="metric-info">
            <text class="metric-icon">{{ getMetricIcon(key) }}</text>
            <text class="metric-label">{{ getMetricLabel(key) }}</text>
          </view>
          <view class="trend">
            <text class="trend-icon">{{ metric.trend === 'up' ? '📈' : '📉' }}</text>
            <text class="trend-value">{{ metric.change > 0 ? '+' : '' }}{{ metric.change }}{{ getMetricUnit(key) }}</text>
          </view>
        </view>
        <text class="metric-value">{{ metric.current }}{{ getMetricUnit(key) }}</text>
        <view class="progress-bar">
          <view 
            class="progress-fill"
            :class="key"
            :style="{ width: getProgressValue(metric.current, metric.target) + '%' }"
          ></view>
        </view>
        <text class="metric-target">目标: {{ metric.target }}{{ getMetricUnit(key) }}</text>
      </view>
    </view>

    <!-- 详细图表 -->
    <view class="chart-section">
      <view class="chart-header">
        <text class="chart-title">📅 周度趋势</text>
      </view>
      
      <view class="chart-tabs">
        <view 
          v-for="tab in chartTabs" 
          :key="tab.value"
          class="chart-tab"
          :class="{ active: activeChart === tab.value }"
          @tap="setActiveChart(tab.value)"
        >
          <text class="tab-text">{{ tab.label }}</text>
        </view>
      </view>

      <view class="chart-content">
        <view 
          v-for="data in getChartData(activeChart)" 
          :key="data.day"
          class="chart-row"
        >
          <text class="chart-day">{{ data.day }}</text>
          <view class="chart-bar-container">
            <view class="chart-bar">
              <view 
                class="chart-bar-fill"
                :class="activeChart"
                :style="{ width: Math.min(data.percentage, 100) + '%' }"
              ></view>
            </view>
            <text class="chart-value">
              {{ formatChartValue(data.value, activeChart) }}
            </text>
          </view>
        </view>
      </view>
    </view>

    <!-- 健康成就 -->
    <view class="achievements-section">
      <view class="achievements-header">
        <text class="achievements-title">🎯 健康成就</text>
      </view>
      <view class="achievements-list">
        <view 
          v-for="achievement in achievements" 
          :key="achievement.title"
          class="achievement-card"
        >
          <text class="achievement-emoji">{{ achievement.emoji }}</text>
          <view class="achievement-content">
            <text class="achievement-title">{{ achievement.title }}</text>
            <text class="achievement-desc">{{ achievement.description }}</text>
          </view>
          <view class="achievement-date">
            <text class="date-text">{{ achievement.date }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 健康评分 -->
    <view class="health-score">
      <view class="score-content">
        <text class="score-title">综合健康评分</text>
        <text class="score-value">85</text>
        <text class="score-desc">您的健康状况良好，继续保持！</text>
        <view class="score-breakdown">
          <view class="score-item">
            <text class="score-label">运动</text>
            <text class="score-status">良好</text>
          </view>
          <view class="score-item">
            <text class="score-label">饮食</text>
            <text class="score-status">优秀</text>
          </view>
          <view class="score-item">
            <text class="score-label">睡眠</text>
            <text class="score-status">良好</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 数据导出 -->
    <view class="export-section">
      <text class="export-title">数据管理</text>
      <view class="export-buttons">
        <view class="export-btn" @tap="exportData">
          <text class="export-icon">📊</text>
          <text class="export-text">导出数据</text>
        </view>
        <view class="export-btn" @tap="shareReport">
          <text class="export-icon">📤</text>
          <text class="export-text">分享报告</text>
        </view>
        <view class="export-btn" @tap="setGoals">
          <text class="export-icon">🎯</text>
          <text class="export-text">设置目标</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const selectedPeriod = ref('week')
const activeChart = ref('weight')

const periods = ref([
  { value: 'week', label: '周' },
  { value: 'month', label: '月' },
  { value: 'year', label: '年' }
])

const chartTabs = ref([
  { value: 'weight', label: '体重' },
  { value: 'steps', label: '步数' },
  { value: 'calories', label: '卡路里' },
  { value: 'sleep', label: '睡眠' }
])

const healthMetrics = ref({
  weight: { current: 65.2, target: 63.0, change: -0.8, trend: 'down' },
  steps: { current: 8432, target: 10000, change: 12, trend: 'up' },
  calories: { current: 1850, target: 2000, change: -5, trend: 'down' },
  sleep: { current: 7.2, target: 8.0, change: 0.3, trend: 'up' }
})

const weeklyData = ref([
  { day: '周一', weight: 65.8, steps: 7200, calories: 1900, sleep: 6.8 },
  { day: '周二', weight: 65.6, steps: 8500, calories: 1850, sleep: 7.2 },
  { day: '周三', weight: 65.4, steps: 9200, calories: 1800, sleep: 7.5 },
  { day: '周四', weight: 65.3, steps: 8800, calories: 1900, sleep: 7.0 },
  { day: '周五', weight: 65.2, steps: 8432, calories: 1850, sleep: 7.2 },
  { day: '周六', weight: 65.1, steps: 9500, calories: 1750, sleep: 8.0 },
  { day: '周日', weight: 65.2, steps: 6800, calories: 2100, sleep: 7.8 }
])

const achievements = ref([
  { title: '连续7天达标', description: '步数目标完成', emoji: '🏆', date: '今天' },
  { title: '体重下降1kg', description: '本月减重成果', emoji: '⚖️', date: '本周' },
  { title: '早睡早起', description: '睡眠质量提升', emoji: '😴', date: '昨天' },
  { title: '饮食均衡', description: '营养摄入达标', emoji: '🥗', date: '本周' }
])

const setPeriod = (period) => {
  selectedPeriod.value = period
}

const setActiveChart = (chart) => {
  activeChart.value = chart
}

const getProgressValue = (current, target) => {
  return Math.min((current / target) * 100, 100)
}

const getMetricIcon = (key) => {
  const icons = {
    weight: '⚖️',
    steps: '🚶',
    calories: '🍽️',
    sleep: '😴'
  }
  return icons[key] || '📊'
}

const getMetricLabel = (key) => {
  const labels = {
    weight: '体重',
    steps: '步数',
    calories: '卡路里',
    sleep: '睡眠'
  }
  return labels[key] || key
}

const getMetricUnit = (key) => {
  const units = {
    weight: 'kg',
    steps: '',
    calories: 'kcal',
    sleep: 'h'
  }
  return units[key] || ''
}

const getChartData = (type) => {
  return weeklyData.value.map(data => ({
    day: data.day,
    value: data[type],
    percentage: type === 'steps' ? (data[type] / 10000) * 100 :
               type === 'weight' ? (data[type] / 66) * 100 :
               type === 'calories' ? (data[type] / 2200) * 100 :
               (data[type] / 9) * 100
  }))
}

const formatChartValue = (value, type) => {
  if (type === 'steps') {
    return value.toLocaleString()
  } else if (type === 'sleep') {
    return value + 'h'
  } else if (type === 'weight') {
    return value + 'kg'
  } else if (type === 'calories') {
    return value + 'kcal'
  }
  return value
}

const exportData = () => {
  wx.showToast({
    title: '数据导出中...',
    icon: 'loading'
  })
}

const shareReport = () => {
  wx.showShareMenu({
    withShareTicket: true
  })
}

const setGoals = () => {
  wx.showToast({
    title: '目标设置功能',
    icon: 'none'
  })
}
</script>

<style scoped>
.health-analytics {
  min-height: 100vh;
  background: #f9fafb;
  padding: 32rpx;
}

.analytics-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 48rpx;
}

.header-title {
  font-size: 40rpx;
  font-weight: 600;
  color: #1f2937;
  display: block;
  margin-bottom: 8rpx;
}

.header-subtitle {
  font-size: 28rpx;
  color: #6b7280;
  display: block;
}

.period-selector {
  display: flex;
  gap: 16rpx;
}

.period-btn {
  padding: 16rpx 24rpx;
  border: 1px solid #d1d5db;
  background: white;
  border-radius: 12rpx;
  transition: all 0.2s;
}

.period-btn.active {
  background: #3b82f6;
  border-color: #3b82f6;
}

.period-text {
  font-size: 28rpx;
  color: #374151;
}

.period-btn.active .period-text {
  color: white;
}

.period-btn:not(.active):active {
  background: #f9fafb;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
  margin-bottom: 48rpx;
}

.metric-card {
  background: white;
  border-radius: 24rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.metric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.metric-info {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.metric-icon {
  font-size: 32rpx;
}

.metric-label {
  font-size: 28rpx;
  color: #6b7280;
}

.trend {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.trend-icon {
  font-size: 24rpx;
}

.trend-value {
  font-size: 24rpx;
  color: #6b7280;
}

.metric-value {
  font-size: 36rpx;
  font-weight: 600;
  color: #1f2937;
  display: block;
  margin-bottom: 16rpx;
}

.progress-bar {
  width: 100%;
  height: 16rpx;
  background: #e5e7eb;
  border-radius: 8rpx;
  overflow: hidden;
  margin-bottom: 16rpx;
}

.progress-fill {
  height: 100%;
  border-radius: 8rpx;
  transition: width 0.3s ease;
}

.progress-fill.weight {
  background: #3b82f6;
}

.progress-fill.steps {
  background: #10b981;
}

.progress-fill.calories {
  background: #f59e0b;
}

.progress-fill.sleep {
  background: #8b5cf6;
}

.metric-target {
  font-size: 24rpx;
  color: #6b7280;
  display: block;
}

.chart-section {
  background: white;
  border-radius: 24rpx;
  padding: 48rpx;
  margin-bottom: 48rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.chart-header {
  margin-bottom: 32rpx;
}

.chart-title {
  font-weight: 600;
  color: #1f2937;
  font-size: 32rpx;
  display: block;
}

.chart-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8rpx;
  margin-bottom: 32rpx;
  background: #f3f4f6;
  border-radius: 16rpx;
  padding: 8rpx;
}

.chart-tab {
  padding: 16rpx;
  background: transparent;
  border-radius: 12rpx;
  text-align: center;
  transition: all 0.2s;
}

.chart-tab.active {
  background: white;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.tab-text {
  font-size: 28rpx;
  color: #6b7280;
}

.chart-tab.active .tab-text {
  color: #1f2937;
}

.chart-content {
  margin-top: 16rpx;
}

.chart-row {
  display: flex;
  align-items: center;
  gap: 24rpx;
  padding: 16rpx;
  border-radius: 16rpx;
  background: #f9fafb;
  margin-bottom: 16rpx;
}

.chart-day {
  font-size: 28rpx;
  color: #6b7280;
  width: 64rpx;
  flex-shrink: 0;
}

.chart-bar-container {
  display: flex;
  align-items: center;
  gap: 16rpx;
  flex: 1;
}

.chart-bar {
  flex: 1;
  height: 16rpx;
  background: #e5e7eb;
  border-radius: 8rpx;
  overflow: hidden;
}

.chart-bar-fill {
  height: 100%;
  border-radius: 8rpx;
  transition: width 0.3s ease;
}

.chart-bar-fill.weight {
  background: #3b82f6;
}

.chart-bar-fill.steps {
  background: #10b981;
}

.chart-bar-fill.calories {
  background: #f59e0b;
}

.chart-bar-fill.sleep {
  background: #8b5cf6;
}

.chart-value {
  font-size: 28rpx;
  font-weight: 500;
  color: #1f2937;
  width: 96rpx;
  text-align: right;
  flex-shrink: 0;
}

.achievements-section {
  background: white;
  border-radius: 24rpx;
  padding: 48rpx;
  margin-bottom: 48rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.achievements-header {
  margin-bottom: 32rpx;
}

.achievements-title {
  font-weight: 600;
  color: #1f2937;
  font-size: 32rpx;
  display: block;
}

.achievements-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.achievement-card {
  display: flex;
  align-items: center;
  gap: 24rpx;
  padding: 24rpx;
  background: linear-gradient(135deg, #fef3c7, #fed7aa);
  border-radius: 16rpx;
}

.achievement-emoji {
  font-size: 48rpx;
}

.achievement-content {
  flex: 1;
}

.achievement-title {
  font-weight: 500;
  color: #1f2937;
  display: block;
  margin-bottom: 8rpx;
  font-size: 28rpx;
}

.achievement-desc {
  font-size: 28rpx;
  color: #6b7280;
  display: block;
}

.achievement-date {
  background: #f3f4f6;
  padding: 8rpx 16rpx;
  border-radius: 12rpx;
}

.date-text {
  color: #6b7280;
  font-size: 24rpx;
}

.health-score {
  background: linear-gradient(135deg, #10b981, #3b82f6);
  border-radius: 24rpx;
  color: white;
  margin-bottom: 48rpx;
}

.score-content {
  padding: 48rpx;
  text-align: center;
}

.score-title {
  font-size: 36rpx;
  font-weight: 600;
  display: block;
  margin-bottom: 16rpx;
}

.score-value {
  font-size: 80rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 16rpx;
}

.score-desc {
  opacity: 0.9;
  display: block;
  margin-bottom: 32rpx;
  font-size: 28rpx;
}

.score-breakdown {
  display: flex;
  justify-content: center;
  gap: 64rpx;
}

.score-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.score-label {
  font-weight: 500;
  display: block;
  margin-bottom: 8rpx;
  font-size: 28rpx;
}

.score-status {
  opacity: 0.75;
  font-size: 24rpx;
  display: block;
}

.export-section {
  background: white;
  border-radius: 24rpx;
  padding: 48rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.export-title {
  font-weight: 600;
  color: #1f2937;
  font-size: 32rpx;
  display: block;
  margin-bottom: 32rpx;
}

.export-buttons {
  display: flex;
  gap: 24rpx;
}

.export-btn {
  flex: 1;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 16rpx;
  padding: 32rpx;
  text-align: center;
  transition: all 0.2s;
}

.export-btn:active {
  background: #f3f4f6;
  transform: scale(0.98);
}

.export-icon {
  font-size: 48rpx;
  display: block;
  margin-bottom: 16rpx;
}

.export-text {
  font-size: 24rpx;
  color: #6b7280;
  display: block;
}

/* 响应式设计 */
@media (max-width: 640rpx) {
  .metrics-grid {
    grid-template-columns: 1fr;
  }
  
  .chart-tabs {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .score-breakdown {
    gap: 32rpx;
  }
  
  .export-buttons {
    flex-direction: column;
  }
}
</style>
